
<template>
  <view class="stepper">
    <button :disabled="value === 1" @click.stop="handleReduce">-</button>
    <view class="count">{{ value }}</view>
    <button @click.stop="handleAdd">+</button>
  </view>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits } from 'vue'

  const props = defineProps({
    value: {
      type: Number || String,
      default: 1
    }
  })
  const emits = defineEmits(['update:value'])

  const handleReduce = () => {
    if (props.value === 1) return
    emits('update:value', props.value - 1)
  }
  const handleAdd = () => {
    emits('update:value', props.value + 1)
  }
</script>

<style lang="less" scoped>
  .stepper {
    display: flex;
    align-items: center;
    .count {
      width: 34px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin: 0 2px;
      background-color: #F0F0F0;
    }
    button {
      width: 30px;
      height: 30px;
      line-height: 29px;
      font-size: 15px;
      background: #F7F7F7;
      border-radius: 2px;
      padding: 0;
      &::after {
        border: none;
      }
    }
  }
</style>
